<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <!-- <el-row class="myBorderBottom">
      <el-col :span="7" class="myTitleText myLineHeight_40px">{{title}}</el-col>
      <el-col :span="17" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="add">新增</el-button>
      </el-col>
    </el-row> -->
    <!-- 头部标题 end -->
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="类型管理" name="first">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-input placeholder="请输入关键词" v-model="kw"></el-input>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="search">查询</el-button>
              </el-col>
            </el-row>
            <el-button type="primary" class="myBgGreen rtbtn" @click="add">新增</el-button>
            <el-row class="myPaddingTop_10px">
              <el-col :span="24">
                <template>
                  <el-table
                    border
                    :data="list"
                    :stripe = true
                    v-loading="loading"
                    style="width: 100%">
                    <el-table-column
                      label="序号"
                      type="index"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      label="类型名称"
                      prop="type_name">
                    </el-table-column>
                    <el-table-column
                      label="总分值"
                      prop="type_score">
                    </el-table-column>
                    <el-table-column
                      label="功能操作"
                      width="120">
                      <template scope="scope">
                        <el-button class="look" type="text" size="small" @click="info(scope.row.type_id)">详情</el-button> |
                        <el-button class="look" type="text" size="small" @click="clickupdate(scope.row.type_id)">编辑</el-button> |
                        <el-button class="look" type="text" size="small" @click="ondelete(scope.row.type_id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-col>
            </el-row>
            <div class="block">                    
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page_num"
                :page-sizes="[10, 15]"
                :page-size="page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="项目管理" name="second">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-select v-model="type_id" clearable placeholder="全部考核类型">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.type_id"
                    :label="item.type_name"
                    :value="item.type_id">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-input placeholder="请输入关键词" v-model="kw2"></el-input>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="search2">查询</el-button>
              </el-col>
            </el-row>
            <el-button type="primary" class="myBgGreen rtbtn" @click="add2">新增</el-button>
            <el-row class="myPaddingTop_10px">
              <el-col :span="24">
                <template>
                  <el-table
                    border
                    :data="list2"
                    :stripe = true
                    v-loading="loading2"
                    style="width: 100%">
                    <el-table-column
                      label="序号"
                      type="index"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      label="考核类型"
                      prop="ptype_name">
                    </el-table-column>
                    <el-table-column
                      label="项目名称"
                      prop="subtype_name">
                    </el-table-column>
                    <el-table-column
                      label="功能操作"
                      width="120">
                      <template scope="scope">
                        <el-button class="look" type="text" size="small" @click="info2(scope.row.subtype_id)">详情</el-button> |
                        <el-button class="look" type="text" size="small" @click="clickupdate2(scope.row.subtype_id)">编辑</el-button> |
                        <el-button class="look" type="text" size="small" @click="ondelete2(scope.row.subtype_id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-col>
            </el-row>
            <div class="block">                    
              <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="page_num2"
                :page-sizes="[10, 15]"
                :page-size="page_size2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    
    

    <el-dialog :title="btnInfo" width='40%' :visible.sync="typeDialog">
      <el-row>
        <el-col :span="6" class="myLineHeight_40px">
          <span class="require">*</span>
          考核类型名称:
        </el-col>
        <el-col :span="18">
          <el-input placeholder="考核类型名称" v-model="type_name" :readonly="readonly"></el-input>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <el-col :span="6" class="myLineHeight_40px">
          <span class="require">*</span>
          考核类型总分值:
        </el-col>
        <el-col :span="18">
          <el-input placeholder="考核类型总分值" v-model="type_score" :readonly="readonly"></el-input>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" v-if="btnInfo=='新增类型'" @click="addok">新 增</el-button>
        <el-button type="primary" class="myBgGreen" v-if="btnInfo=='编辑类型'" @click="update">保 存</el-button>
        <el-button @click="typeDialog = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="btnInfo2" width='40%' :visible.sync="subtypeDialog">
      <el-row>
        <el-col :span="6" class="myLineHeight_40px">
          <span class="require">*</span>
          隶属考核类型:
        </el-col>
        <el-col :span="18">
          <el-select v-model="typeValue" clearable placeholder="请选择隶属考核类型" :disabled="readonly2">
            <el-option
              v-for="item in typeOptions"
              :key="item.type_id"
              :label="item.type_name"
              :value="item.type_id+'-'+item.type_name">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <el-col :span="6" class="myLineHeight_40px">
          <span class="require">*</span>
          考核项目名称:
        </el-col>
        <el-col :span="18">
          <el-input placeholder="考核项目名称" v-model="subtype_name" :readonly="readonly2"></el-input>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" v-if="btnInfo2=='新增项目'" @click="addok2">新 增</el-button>
        <el-button type="primary" class="myBgGreen" v-if="btnInfo2=='编辑项目'" @click="update2">保 存</el-button>
        <el-button @click="subtypeDialog = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>     

<style>
.el-tabs__content{
  overflow: visible;
}
</style>  
<style scoped>
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myred{
    color: #f00;
    font-size: 12px;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
  }
  .rtbtn{
    position: absolute;
    top: -60px;
    right: 0;
  }
  
</style>

<script>
  import { getTypeList , deleteType , addType , updateType , infoType , getSubtypeList , addSubtype , updateSubtype , infoSubType , deleteSubType } from "@/api/quality";
  export default {
    data(){
      return{
        title:"考核类型及项目管理",
        page_num:1,
        page_size:10,
        total:null,
        list:[],
        loading:false,
        kw:"",
        activeName:'first',
        readonly:false,
        type_name:'',
        type_score:'',
        typeDialog:false,
        btnInfo:'add',
        typeid:'',
        list2:[],
        typeOptions:[],
        kw2:'',
        typeValue:'',
        page_num2:1,
        page_size2:10,
        total2:null,
        loading2:false,
        subtypeDialog:false,
        btnInfo2:'',
        subtype_name:'',
        readonly2:false,
        type_id:'',
        subtypeid:''

      }
    },
    components: {

    },
    created(){
      document.title=this.title;
      this.ongetTypeList();
    },
    watch: {
      
    },
    methods:{
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
        this.ongetTypeList();
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
        this.ongetTypeList();
      },
      handleSizeChange2(val) {//每页条数控制
        this.page_size2 = val;
        this.ongetSubtypeList();
      },
      handleCurrentChange2(val) {//每页
        this.page_num2 = val;
        this.ongetSubtypeList();
      },
      add(){
        this.btnInfo='新增类型';
        this.type_name='';
        this.type_score='';
        this.typeDialog=true;
        // this.$router.push({
        //   path:"assessmentMajorComonents",
        //   query:{
        //     type:"add"
        //   }
        // })
      },
      ondelete(id){
        let vm=this;
        vm.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteType(id).then(response => {
            vm.$message.success("执行成功！");
            vm.ongetTypeList();
          }).catch(error => {
            vm.$message.error("执行失败！"+error.response.data.error_msg);
          })
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      search(){
        this.ongetTypeList();
      },
      ongetTypeList(){
        let vm=this;
        let params={
          keyword:vm.kw,
          page_num:vm.page_num,
          page_size:vm.page_size
        }
        vm.loading=true;
        getTypeList(params).then(response => {
          let res=response.data;
          vm.list=res.rows;
          vm.page_size=res.page_size;
          vm.page_num=res.page_num;
          vm.total=res.total;
          vm.loading=false;
        }).catch(error => {
          vm.loading=false;
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      ongetTypeList2(){
        let vm=this;
        let params={
          page_num:1,
          page_size:999
        }
        getTypeList(params).then(response => {
          let res=response.data;
          vm.typeOptions=res.rows;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      handleClick(tab, event) {
        if(tab.name=='first'){
          this.ongetTypeList();
        }else{
          this.ongetTypeList2();
          this.ongetSubtypeList();
        }
      },
      addok(){
        let vm=this;
        let params={
          "type_name": vm.type_name,
          "type_score": vm.type_score,
        }
        if(!vm.type_name || !vm.type_score){
          vm.$message.info("必要数据请填写完整！");
          return;
        }
        addType(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetTypeList();
          vm.typeDialog=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      info(id){
        let vm=this;
        vm.typeid=id;
        vm.btnInfo='类型详细';
        vm.typeDialog=true;
        vm.readonly=true;
        vm.getType();
      },
      getType(){
        let vm=this;
        vm.type_name='';
        vm.type_score='';
        infoType(vm.typeid).then(response => {
          let res=response.data;
          vm.type_name=res.type_name;
          vm.type_score=res.type_score;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      clickupdate(id){
        let vm=this;
        vm.typeid=id;
        vm.btnInfo='编辑类型';
        vm.typeDialog=true;
        vm.readonly=false;
        vm.getType();
      },
      update(){
        let vm=this;
        let params={
          "type_name": vm.type_name,
          "type_score": vm.type_score,
        }
        if(!vm.type_name || !vm.type_score){
          vm.$message.info("必要数据请填写完整！");
          return;
        }
        updateType(params,vm.typeid).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetTypeList();
          vm.typeDialog=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      ongetSubtypeList(){
        let vm=this;
        let params={
          keyword:vm.kw2,
          type_id:vm.type_id,
          page_num:vm.page_num2,
          page_size:vm.page_size2
        }
        vm.loading2=true;
        getSubtypeList(params).then(response => {
          let res=response.data;
          vm.list2=res.rows;
          vm.page_size2=res.page_size;
          vm.page_num2=res.page_num;
          vm.total2=res.total;
          vm.loading2=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      search2(){
        this.ongetSubtypeList();
      },
      add2(){
        this.btnInfo2='新增项目';
        this.subtype_name='';
        this.typeValue='';
        this.readonly2=false;
        this.subtypeDialog=true;
      },
      addok2(){
        let vm=this;
        if(!vm.subtype_name || !vm.typeValue){
          vm.$message.info("必要数据请填写完整！");
          return;
        }
        let params={
          "subtype_name": vm.subtype_name,
          "ptype_name": vm.typeValue.split('-')[1],
          "pid": vm.typeValue.split('-')[0],
          "status":1
        }
        addSubtype(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetSubtypeList();
          vm.subtypeDialog=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      update2(){
        let vm=this;
        if(!vm.subtype_name || !vm.typeValue){
          vm.$message.info("必要数据请填写完整！");
          return;
        }
        let params={
          "subtype_name": vm.subtype_name,
          "subtype_id": Number(vm.subtypeid),
          "ptype_name": vm.typeValue.split('-')[1],
          "pid": Number(vm.typeValue.split('-')[0]),
          "status":1
        }
        updateSubtype(params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetSubtypeList();
          vm.subtypeDialog=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      info2(id){
        let vm=this;
        vm.subtypeid=id;
        vm.btnInfo2='项目详细';
        vm.subtypeDialog=true;
        vm.readonly2=true;
        vm.getSubType();
      },
      getSubType(){
        let vm=this;
        vm.subtype_name='';
        vm.typeValue='';
        infoSubType(vm.subtypeid).then(response => {
          let res=response.data;
          vm.subtype_name=res.subtype_name;
          vm.typeValue=res.pid+'-'+res.ptype_name;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      clickupdate2(id){
        let vm=this;
        vm.subtypeid=id;
        vm.btnInfo2='编辑项目';
        vm.subtypeDialog=true;
        vm.readonly2=false;
        vm.getSubType();
      },
      ondelete2(id){
        let vm=this;
        vm.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSubType(id).then(response => {
            vm.$message.success("执行成功！");
            vm.ongetSubtypeList();
          }).catch(error => {
            vm.$message.error("执行失败！"+error.response.data.error_msg);
          })
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

    }
}
</script>

